<template>
  <div style="padding: 0 2px;">
    <a-tooltip placement="top">
      <template slot="title">
        <span>{{ digitUppercaseByString(innerText) }}</span>
      </template>
      <a-input :size="size" v-if="auth === 'edit'" class="form-design-money-input" @blur="blur"
               :placeholder="innerPlaceholder" v-model="innerText" />
      <span v-else-if="auth === 'browse'">{{ showUppercase ? digitUppercaseByString(innerText) : innerText }}</span>
    </a-tooltip>
  </div>
</template>
<script>
import { createModelForVue, createProps } from '@/utils'
import { digitUppercaseByString } from '@/utils/util'

function formatMoney(number) {//把数字格式化成金额
  if (number === null || number === '' || number === undefined || isNaN(number)) return undefined
  try {
    number = number + ''
    number = number.replace(/\,/g, '')
    number = parseFloat(number)
    if (isNaN(number)) return undefined
    return number.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,')
  } catch (e) {
    console.error(e)
  }
  return undefined
}

function parseMoney(number) {//把数字格式化成金额
  if (number === null || number === '' || number === undefined) return undefined
  try {
    number = number + ''
    number = number.replace(/\,/g, '')
    number = parseFloat(number)
    if (isNaN(number)) return undefined
    if (number === Infinity) return undefined
    number = number.toFixed(2)
    return number + ''
  } catch (e) {
    console.error(e)
  }
  return undefined
}

export default {
  name: 'MoneyInput',
  model: createModelForVue(),
  props: {
    auth: createProps(String, 'edit'),
    placeholder: createProps(String),
    fieldConfig: createProps(Object),
    size: createProps(String),
    value: {
      type: [String, Number],
      default: undefined
    }
  },
  data() {
    return {
      innerText: undefined
    }
  },
  methods: {
    digitUppercaseByString,
    blur() {
      if (!this.innerText && (this.value == 0 || parseFloat(this.value) == 0)) {
        return;
      }
      let v = parseMoney(this.innerText)
      v = this.resolveRange(v)
      this.change(v)
      this.innerText = formatMoney(v)
    },
    change(value) {
      this.$emit('change', value)
      this.$emit('update', value)
      this.$emit('update:value', value)
      this.$emit('update:title', value)
    },
    resolveRange(v) {
      if (!v) return v
      if (parseFloat(v) > this.max) {
        v = this.max + ''
      }
      if (parseFloat(v) < this.min) {
        v = this.min + ''
      }
      return v
    }
  },
  computed: {
    showZero: {
      get() {
        try {
          return this.fieldConfig.exts.showZero;
        } catch (e) {
        }
        return false;
      },
      set(v) {
        let exts = this.fieldConfig.exts || {};
        this.$set(this.fieldConfig, 'exts', exts);
        this.$set(exts, 'showZero', v);
      },
    },
    showUppercase: {
      get() {
        try {
          return !!this.fieldConfig.exts.showUppercase;
        } catch (e) {
        }
        return false;
      },
      set(v) {
        let exts = this.fieldConfig.exts || {};
        this.$set(this.fieldConfig, 'exts', exts);
        this.$set(exts, 'showUppercase', v);
      }
    },
    innerPlaceholder() {
      return (this.fieldConfig && this.fieldConfig.placeholder) || this.placeholder
    },
    min() {
      try {
        let res = parseFloat(this.fieldConfig.minValue)
        if (res && res !== 0) return res
        if (res === 0) return 0
      } catch (e) {
      }
      return -9999999999999.99
    },
    max() {
      try {
        let res = parseFloat(this.fieldConfig.maxValue)
        if (res && res !== 0) return res
        if (res === 0) return 0
      } catch (e) {
      }
      return 9999999999999.99
    }
  },
  watch: {
    value: {
      handler() {
        if(!this.showZero) {
          try {
            if (this.value == 0 || parseFloat(this.value + '') === 0)
              return this.innerText = undefined;
          } catch (e) {
          }
        }
        this.innerText = formatMoney(this.value);
      },
      immediate: true
    }
  }
}
</script>
<style>
.form-design-money-input {
  text-align: right;
}
</style>